<template>
  <div class="main">
    <WebLayout />
    <div class="content">
      <div class="title">知识图谱智能查询</div>
      <div class="search-box">
        <div class="input-box">
          <el-select v-model="searchData.projectId" placeholder="请选择图谱">
            <el-option
              v-for="item in options"
              :key="item.projectId"
              :label="item.projectName"
              :value="item.projectId"
            ></el-option>
          </el-select>
          <div class="vertical-line"></div>
          <el-input
            v-model="searchData.searchKey"
            placeholder="请输入关键词"
            clearable
            @change="useTranslate"
          />
          <img
            src="@/assets/img/translation.png"
            alt="实体链接"
            width="24px"
            height="24px"
            class="trans-img"
            @click="openTrans"
          />
        </div>
        <el-button @click="normalSearch" icon="el-icon-search">查询</el-button>
        <el-link :underline="false" @click="openAdvanceSearch">
          高级检索
        </el-link>
        <!-- 翻译区域 -->
        <transition name="el-zoom-in-top">
          <div v-if="showTransBox" class="translation-box">
            <div class="change-box">
              <div>
                <span>实体链接</span>
                <el-switch
                  v-model="searchData.bilingual"
                  active-color="#00AAFF"
                  inactive-color="#133f77"
                >
                </el-switch>
              </div>
            </div>
            <!-- 翻译结果区域 -->
            <div
              v-loading="loading"
              element-loading-background="rgba(1, 43, 80, 0.5) "
              class="trans-result"
            >
              {{ searchData.translateKey }}
            </div>
            <img
              src="~@/assets/img/close.png"
              alt="关闭"
              @click="showTransBox = false"
            />
          </div>
        </transition>
      </div>
      <div class="recommend-title">
        <img src="@/assets/img/hot.png" />
        <div class="m-l-10">热门推荐</div>
      </div>
      <div class="tag-box">
        <el-tag
          v-for="(item, index) in tagList"
          :key="index"
          @click="tagClick(item)"
          >{{ item }}</el-tag
        >
      </div>
    </div>
    <AdvancedSearch
      ref="advancedSearch"
      position="search"
      :graphList="options"
    />
  </div>
</template>

<script>
import WebLayout from "@/views/layout/webLayout.vue";
import AdvancedSearch from "./common/advancedSearch.vue";
import { debounce } from "@/plugins/utils";
import { mapMutations } from "vuex";
export default {
  components: {
    WebLayout,
    AdvancedSearch,
  },
  data() {
    return {
      searchData: {
        projectId: "",
        bilingual: false,
        searchKey: "",
        translateKey: "",
        searchPropList: [
          {
            type: 0,
            condition: "AND",
            entityName: "",
            headEntityName: "",
            tailEntityName: "",
            relationName: "",
            propId: "",
            propValue: "",
            ontologyId: "",
          },
        ],
      },
      showTransBox: false,
      tagList: [],
      options: [],
      loading: false,
    };
  },
  created() {
    this.getRecommendList();
    this.getGraph();
  },
  watch: {
    "searchData.searchKey": function () {
      this.useTranslate();
    },
  },
  methods: {
    ...mapMutations({
      setSearchData: "search/SET_SEARCHDATA",
    }),
    // 获取热门推荐
    getRecommendList() {
      this.$axios.get(this.$api.search.searchApi.getRecommend).then((res) => {
        let { data, code } = res.data;
        if (code == 200) {
          this.tagList = data;
        }
      });
    },
    // 获取图谱列表
    getGraph() {
      const params = {
        pageNum: 1,
        pageSize: 500,
      };
      this.$axios
        .post(this.$api.search.searchApi.getGraphList, params)
        .then((res) => {
          let { data, code } = res.data;
          if (code == 200) {
            this.options = data.list;
            this.searchData.projectId = this.options[0]?.projectId;
          }
        });
    },
    // 热门推荐点击
    tagClick(item) {
      this.searchData.searchKey = item;
      this.normalSearch();
    },
    // 普通检索
    normalSearch() {
      this.setSearchData({
        ...this.searchData,
        type: "normal",
      });
      this.$router.push({ name: "ResultPage" });
    },
    // 高级检索
    openAdvanceSearch() {
      this.setSearchData({
        ...this.searchData,
        type: "advanced",
      });
      this.$refs.advancedSearch.show();
    },
    // 显示翻译页面
    openTrans() {
      if (this.showTransBox) {
        this.showTransBox = false;
        return;
      }
      this.showTransBox = true;
      this.useTranslate();
    },
    // 调用翻译 启用防抖
    useTranslate: debounce(function () {
      if (!this.showTransBox || this.searchData.searchKey.length === 0) {
        return;
      }
      this.loading = true;
      // const params = {
      //   text: this.searchData.searchKey,
      // };
      this.$axios
        .get(
          `${this.$api.search.searchApi.translate}?text=${this.searchData.searchKey}`
        )
        .then((res) => {
          let { data, code } = res.data;
          if (code == 200) {
            this.searchData.translateKey = data;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    }, 1000),
  },
};
</script>

<style lang="scss" scoped>
.main {
  height: 100%;
  width: 100%;
  background: url("~@/assets/img/search_bg.png") no-repeat;
  color: #02f1fd;
  display: flex;
  justify-content: center;
  align-items: center;
  .content {
    width: 50%;
    padding-bottom: 5%;
    .title {
      font-weight: 500;
      font-size: 40px;
      color: #ffffff;
      line-height: 56px;
      letter-spacing: 1px;
      text-align: center;
      background: linear-gradient(90deg, #ffffff 0%, #74bbff 100%);
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .search-box {
      display: flex;
      position: relative;
      margin: 48px 0;
      .input-box {
        display: flex;
        align-items: center;
        width: calc(100% - 107px - 16px - 16px - 80px);
        height: 100%;
        box-shadow: inset 0px 0px 3px 0px #0180db;
        border: 1px solid #043661;
        background: rgba(3, 23, 46, 0.4);
        border-radius: 4px;
        margin-right: 16px;
        .el-select {
          ::v-deep .el-input__inner {
            height: 64px;
            font-size: 20px;
            color: #00aaff;
            background: transparent;
            border: none;
            border-radius: 0;
          }
        }
        .el-input {
          height: 64px;
          ::v-deep .el-input__inner {
            height: 100%;
            line-height: 100%;
            font-size: 20px;
            color: #ffffff;
            background: transparent;
            border: none;
            border-radius: 0;
          }
          ::v-deep .el-input__inner::-webkit-input-placeholder {
            color: darken(#ffffff, 30%);
          }
        }
        .trans-img {
          margin: 0 20px;
          cursor: pointer;
        }
        .vertical-line {
          width: 1px;
          height: 24px;
          border: 1px solid #0e436c;
        }
      }
      .el-button {
        height: auto;
        width: auto;
        border-radius: 4px;
        background: linear-gradient(
          to top,
          rgba(27, 188, 255, 0.89) 0%,
          rgba(7, 31, 63, 0) 100%
        );
        border-color: #0197ec;
        color: #ffffff;
        font-size: 20px;
        margin-right: 16px;
      }
      .el-link {
        display: inline-block;
        width: 160px;
        font-size: 20px;
        line-height: 28px;
        font-weight: 500;
        color: #00aaff;
        margin: auto;
        ::v-deep .el-link--inner {
          color: #00aaff;
          &:hover {
            color: lighten(#00aaff, 30%);
          }
        }
      }
      .translation-box {
        position: absolute;
        width: calc(80% + 100px);
        height: 240px;
        padding: 20px;
        top: 74px;
        left: 0;
        border-radius: 4px;
        background: #012b50;
        border: 1px solid;
        border-image: linear-gradient(
            315deg,
            rgba(72, 168, 255, 1),
            rgba(9, 48, 92, 1),
            rgba(72, 168, 255, 1)
          )
          1 1;
        .change-box {
          display: flex;
          justify-content: flex-end;
          align-items: center;
          font-size: 20px;
          color: #6599ca;
          margin-bottom: 20px;
          .el-switch {
            margin-left: 8px;
          }
        }
        .trans-result {
          color: #ffffff;
          font-size: 20px;
        }
        img {
          position: absolute;
          bottom: -32px;
          cursor: pointer;
          left: calc(50% - 24px);
        }
      }
    }
    .recommend-title {
      font-weight: 500;
      font-size: 24px;
      color: #ffb036;
      line-height: 33px;
      text-align: left;
      font-style: normal;
      background: linear-gradient(90deg, #ffcc6a 0%, #ff7036 100%);
      background-clip: text;
      -webkit-text-fill-color: transparent;
      display: flex;
      margin-bottom: 20px;
    }
    .tag-box {
      display: flex;
      flex-wrap: wrap;
      min-height: 58px;
      .el-tag {
        margin-right: 20px;
        margin-bottom: 20px;
        background: #003b6f;
        color: #c3dfff;
        font-size: 18px;
        border: none;
        border-radius: 20px;
        height: auto;
        line-height: auto;
        padding: 4px 16px;
        font-weight: 400;
        &:hover {
          cursor: pointer;
          color: lighten(#c3dfff, 30%);
        }
      }
    }
  }
}
.m-r-10 {
  margin-right: 10px;
}
</style>
<style>
.el-select-dropdown {
  background: #012b50;
  color: #ffffff;
  border: 1px solid #043661;
  box-shadow: inset 0px 0px 3px 0px #0180db;
}
.el-select-dropdown__item {
  color: #ffffff;
}
.el-select-dropdown__item.selected {
  background-color: #094888;
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background-color: #094888;
}
</style>
